<template>
    <div class="todolist">
      <el-main>
        <el-col :span="18">
          <el-input type="text" v-model="newTask" @keydown.enter.native="addTask"></el-input>
        </el-col>
        <el-button type="primary" @click="addTask">添加</el-button>
      </el-main>
      <ul>
        <li v-for="(item, index) in worklist" :key="index">
            <el-button type="success" icon="el-icon-check" circle @click="completed(index)"></el-button>
            <el-button type="danger" icon="el-icon-star-off" circle @click="urgent(index)"></el-button>
            <el-tag closable :disable-transitions="false" @close="deleteTask(index)" :type="item.type">{{item.task}}</el-tag>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      worklist: [
        {task: '学习B和弦', type: ''},
        {task: 'learn F# chord', type: 'success'}
      ],
      newTask: '',
      task: {}
    }
  },
  methods: {
    addTask: function () {
      if (this.newTask.length === 0) {
        return
      }
      this.worklist.unshift({task: this.newTask, type: ''})
      this.newTask = ''
    },
    deleteTask: function (index) {
      this.task = this.worklist[index]
      this.worklist.splice(index, 1)
    },
    completed: function (index) {
      this.worklist[index].type = 'success'
      this.deleteTask(index)
      this.worklist.push(this.task)
    },
    urgent: function (index) {
      this.worklist[index].type = 'danger'
      this.deleteTask(index)
      this.worklist.unshift(this.task)
    }
  },
  watch: {
    worklist: function () {
      console.log(this.worklist)
    }
  }
}
</script>

<style lang="less" scoped>
ul{
  margin: 0;
  padding: 0;
  li {
      margin: 0;
      padding: 0;
      line-height: 50px;
      list-style: none;
  }
}

</style>
